<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;
        }

        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        .allCheck {
            width: 80px;
        }
    </style>
    <script src="../ajax/jquery-3.5.1.min.js"></script>
</head>

<body>
<table>
    <tr>
        <th class="allCheck">
            <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
        </th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check" class="ck">
        </td>
        <td>小米手机</td>
        <td>小米</td>
        <td>￥1999</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check" class="ck">
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥4999</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check" class="ck">
        </td>
        <td>小米电视</td>
        <td>小米</td>
        <td>￥5999</td>
    </tr>
</table>
<script>
    const checkedAll=$("#checkAll")
    const checked=$(".ck")
    checkedAll.click(function (){
        for (let i = 0; i < checked.length; i++) {
            $(checked[i]).prop("checked",this.checked)
        }
        console.log(checked.prop("checked")===true)
    })
    let j=0
    for (let i=0;i<checked.length;i++){
        $(checked[i]).click(function (){
            console.log($(checked[i]).prop("checked")===true)
            if ($(checked[i]).prop("checked")===true){
                j++
            }
            if ($(checked[i]).prop("checked")===false){
                j--
            }
            if (j===3){
                checkedAll.prop("checked",true)
            }
            else {
                checkedAll.prop("checked",false)
            }

        })
    }

</script>
</body>
</html>